<template>
    <div class="menu-page">
        <div class="list-menu top-menu" v-loading="thisLoading">
            <h4 v-if="menuList.topList.length > 0">日常运维</h4>
            <ul class="menu-box">
                <li class="menu-item" v-for="(item,index) in menuList.topList" :key="index" @click="tolinkPage(item.url)">
                    <div class="img-box">
                        <img :src="imgsList[item.url] || imgsList.nourl" alt="">
                    </div>
                    {{item.name}}
                </li>
            </ul>
        </div>
        <div class="list-menu bottom-menu" v-if="menuList.bottomList.length > 0">
            <h4>管理工具</h4>
            <ul class="menu-box">
                <li class="menu-item" v-for="(item,index) in menuList.bottomList" :key="'bot'+index" @click="tolinkPage(item.url)">
                    <div class="img-box">
                        <img :src="imgsList[item.url] || imgsList.nourl" alt="">
                    </div>
                    {{item.name}}
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import img1 from "@/assets/images/yyspgx.png";
import img2 from "@/assets/images/ryqxgl.png";
import img3 from "@/assets/images/dzjxbc.png";
import img4 from "@/assets/images/gzql.png";
import img5 from "@/assets/images/rzck.png";
import img6 from "@/assets/images/sbhzkb.png";
import img7 from "@/assets/images/nshzbb.png";
import { getUaaListApi } from "@/api/getData";
export default {
    name:"MenuPage",
    data(){
        return{
            imgsList:{
                manager:img1,
                lookpower:img2,
                otherFun:img3,
                authAgent:img4,
                logger:img5,
                dictionary:img6,
                nourl:img7
            },
        }
    },
    computed:{
        thisLoading() {
            return this.$store.state.isLoading;
        },
        menuList(){
            let list = this.$store.state.menuListData,newList = [],_tList=[];
            if(list.length !== 0){
                list.map((item)=>{
                    if(item.group == "daliyMaintain"){
                        newList.push(item);
                    }
                    if(item.group == "managementTools"){
                        _tList.push(item);
                    }
                })
            }
            return {
                topList:newList,
                bottomList:_tList,
            }
        }
    },
    mounted(){
        if(this.$store.state.menuListData.length == 0){
            this.$store.dispatch('initMenuList');
        };
    },
    methods:{
        tolinkPage(name){
            if(name){
                this.$router.push({name:name})
            };
        }
    }
}
</script>
<style lang="less" scoped>
@import url('./less/menu.less');
</style>